<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>02-05</title>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="simple1">
    <div>좋아하는 과일을 모두 골라주세요 : </div>
    <input type="checkbox" value="1" v-model="fruits">사과, 
    <input type="checkbox" value="2" v-model="fruits">키위, 
    <input type="checkbox" value="3" v-model="fruits">포도,
    <input type="checkbox" value="4" v-model="fruits">수박,
    <input type="checkbox" value="5" v-model="fruits">참외
  </div>
  <hr />
  <div id="simple2">
     선택한 과일들 : <span v-html="fruits"></span>
  </div>
  <script type="text/javascript">
  var model = {
    fruits : []
  };

  var simple1 = new Vue({
      el : '#simple1', data : model
  })

  var simple2 = new Vue({
      el : '#simple2', data : model
  });
  </script>
</body>
</html>